<template>
  <view class="font-size-0 bg-#e7e7e7 relative"
    :style="{ 
      width: size + 'rpx', 
      height: size + 'rpx',
      borderRadius: round + 'rpx', 
    }"
  >
    <view class="font-size-20rpx rounded-4rpx px-6rpx leading-20rpx py-4rpx absolute right-4rpx top-4rpx z-9 color-#fff"
      v-if="imgNum"
      style="background: rgba(32,32,32,0.5);"
    >共{{ imgNum }}张</view>
    <view class="base-img-border"
      v-if="['loading', 'error'].includes(status) || !imgSrc"
      :style="{ borderRadius: round + 'rpx' }"
    ></view>
    <wd-img 
      v-if="imgSrc"
      :width="size + 'rpx'" 
      :height="size + 'rpx'" 
      :radius="round + 'rpx'" 
      :src="thumbnailPreUrl ? thumbnailPreUrl : imgSrc" 
      :enable-preview="true" 
      :preview-src="imgSrc"
      mode="aspectFill" 
      @error="handleError"
      @load="handleLoad"
      @tap.stop="handleClickImg"
    >
      <template #error>
        <wd-img 
          :width="size + 'rpx'" 
          :height="size + 'rpx'" 
          :radius="round + 'rpx'" 
          :src="defaultAvatar" 
          mode="aspectFill" 
        />
      </template>
      <template #loading>
        <wd-img 
          :width="size + 'rpx'" 
          :height="size + 'rpx'" 
          :radius="round + 'rpx'" 
          :src="defaultAvatar" 
          mode="aspectFill" 
        />
      </template>
    </wd-img>
    <wd-img 
      v-else
      :width="size + 'rpx'" 
      :height="size + 'rpx'" 
      :radius="round + 'rpx'" 
      :src="defaultAvatar" 
      mode="aspectFill" 
    />
  </view>
</template>

<script lang="ts" setup>
import { defaultAvatar } from '@/static/base64/index';
const props = defineProps({
  size: {
    type: Number,
    default: 144
  },
  round: {
    type: Number,
    default: 12
  },
  imgNum: {
    type: Number,
    default: 0
  },
  imgSrc: {
    type: String,
    default: ''
  },
  thumbnailPreUrl: {
    type: String,
    default: ''
  },
})

const status = ref('loading');
const handleLoad = () => {
  status.value = 'loaded';
}
const handleError = () => {
  status.value = 'error';
}
const handleClickImg = (e) => {
  e.stopPropagation();
}
</script>

<style lang="scss" scoped>
.base-img-border {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid #9C6DEF;
  width: 100%;
  height: 100%;
}
</style>
